<template>
    <el-dialog v-model="visible" :title="`${data.ename}的请假申请`" width="50%" style="padding-right:50px;">
        <el-form label-width="100px">
            <el-form-item label="类型：" style="color:#337ecc;font-weight:bold;">
                {{ getTypeName(data.type) }}
            </el-form-item>
            <el-form-item label="状态：" style="color:#337ecc;font-weight:bold;">
                {{ statusMap[data.lstatus] }}
            </el-form-item>
            <el-form-item label="所在部门：" style="color:#337ecc;font-weight:bold;">
                {{ data.dname }}
            </el-form-item>
            <el-form-item label="起止时间：" style="color:#337ecc;font-weight:bold;">
                {{ data.lStart }} 到 {{ data.lEnd }}
            </el-form-item>
            <el-form-item label="详情：" style="color:#337ecc;font-weight:bold;">
                {{ data.lcause }}
            </el-form-item>

            <el-form-item label="提交时间：" style="color:#337ecc;font-weight:bold;">
                {{ data.lsubmitDate }}
            </el-form-item>
            <el-form-item v-if="data.lstatus === 1" label="审批意见：" style="font-weight:bold;">
                <el-input v-model="data.lspAdvice" type="textarea" />
            </el-form-item>
            <template v-else>
                <el-form-item label="审批意见：" style="color:#337ecc;font-weight:bold;">
                    {{ data.lspAdvice }}
                </el-form-item>
                <el-form-item label="审批时间：" style="color:#337ecc;font-weight:bold;">
                    {{ data.lspDate }}
                </el-form-item>
                <el-form-item label="审批人：" style="color:#337ecc;font-weight:bold;">
                    {{ data.lspr }}
                </el-form-item>
                <el-form-item v-if="data.l_status === 4" label="销假时间：" style="color:#337ecc;font-weight:bold;">
                    {{ data.lBackDate }}
                </el-form-item>
            </template>

        </el-form>

        <template #footer>
            <div style="text-align: center;">
                <el-button v-if="data.lstatus === 1" type="success" @click="execPass">同意</el-button>
                <el-button v-if="data.lstatus === 1" type="danger" @click="execReject">驳回</el-button>
                <el-button @click="visible = false">取消</el-button>
            </div>
            
        </template>

    </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import req from '@/request'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['ok']);

const statusMap = {
    0: '未提交',
    1: '已提交',
    2: '已驳回',
    3: '已批准',
    4: '已确认'
};

const TypeOptions = [
  { value: 1, label: '请假' },
  { value: 2, label: '工作汇报' },
  { value: 3, label: '出差' }
]

const getTypeName = (typeValue) => {
    const type = TypeOptions.find(item => item.value === typeValue);
    return type ? type.label : '未知类型';
}

const visible = ref(false);

const open = (row) => {
    console.log("传入信息：",row)
    for (let prop in data) {
        data[prop] = row[prop];
    }
    visible.value = true;
}

const data = reactive({
    lid: '',
    lcause: '',
    lStart: '',
    lEnd: '',
    ename: '',
    lsubmitDate: '',
    lstatus: '',
    dname: '',
    lspAdvice: '',
    lspDate: '',
    lspr: '',
    lBackDate: '',
    type: ''
});

const execPass = async () => {
    await req.put('/leave/exam/pass', data);
    emit('ok');
    visible.value = false;
    ElMessage.success('同意请假申请成功!');
}

const execReject = async () => {
    await req.put('/leave/exam/reject', data);
    emit('ok');
    visible.value = false;
    ElMessage.success('驳回请假申请成功!');
}

defineExpose({
    open
});
</script>
<style scoped></style>